<template>
	<view class="square">
		<cu-custom bgColor="bg-F7F7F7" :isBack="true" textRight="true" type="custom-recuit">
			<block slot="backText">
				<view class="titilestyle">
					{{title}}
				</view>


			</block>

		</cu-custom>


		<!--  搜索感兴趣的社团 -->
		<view class="search">
			<view class="search-boxes flex align-center " @click="jumpTo('','search')">

			<input class="inputSearch1 basis-xl " type="text" placeholder="搜索您感兴趣的社团" />
			<view class="cuIcon-search basis-xs   text-right"></view>

		</view>
		</view>
		<mescroll-body bottom="20%" height="40%" class="mescroll-body" ref="mescrollRef" :down="downOption"
			@init="mescrollInit" @up="upCallback">
		


		<!-- 轮播 -->
		<view class="banner-box ">
			<image :src="res+'/static/shetuan/banner.png'" mode="aspectFit"></image>

		</view>


		<!-- 推荐 -->

		<view class="recommend-box">

			<view class="title">
				推荐社团
			</view>

			<scroll-view scroll-x="true" class="">
				<view class="scroll-view flex ">
					<view class="scroll-view-item middle flex-direction " v-for="(item,i) in recommend" :key="i">
						<image class="img  round" :src="res+item.img" mode=""></image>
						<text class="name">{{item.name}}</text>
						<text class="desc">{{item.tag}}</text>
						<view class="btn-box round middle" @click="join(i)" :class="item.status?'join':'nojoin'">
							{{item.status?"已加入":"加入"}}
						</view>
					</view>
				</view>
			</scroll-view>


		</view>


		<!-- 近期活动 -->
		<view class="active-box ">
			<view class="title">
				近期活动
			</view>
			
			<view class="active-item bg-white flex justify-between" v-for="(item,i) in list" :key="i">
					<view class="left ">
						<image :src="res+item.img" mode="aspectFill"></image>

					</view>
					<view class="right1  text-left justify-around flex flex-direction">
						<view class="title1 text-left ">
							{{item.title}}
						</view>
						<view class="bottom1 flex justify-between">
							<text>{{item.tag}} | {{item.time}}</text>
							<text class="text-blue" v-if="item.status==1">正在进行</text>
							<text class="text-gray" v-if="item.status==2">已结束</text>
						</view>

					</view>

				</view>




			
		</view>



</mescroll-body>


	</view>
</template>

<script>
	import MescrollBody from "@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	
	import {
		getData
	} from "../../static/shetuan/api.js"
	export default {
		mixins: [MescrollMixin],
		components: {
			MescrollBody,
		},
		data() {
			return {
				title: "社团",
				res: this.apiHost + "/static/otherApp/",
				downOption: {
					use: false
				},
				list: [],
				recommend:[
					{
						name:"摄影社",
						tag:"科学人文丨38社员",
						status:false,
						img:"/static/shetuan/sheyin.png"
					},
					{
						name:"动漫社",
						tag:"影视娱乐丨45社员",
						status:false,
						img:"/static/shetuan/dongma.png"
					},
					{
						name:"足球社",
						tag:"体育运动丨884社员",
						status:false,
						img:"/static/shetuan/zhuqiu.png"
					}
					
				]


			}

		},
		methods: {
			join(i){
				this.recommend[i].status=this.recommend[i].status?false:true;
				
			},
			upCallback(page) {
				getData(page.num, page.size).then(curPageData => {

					this.mescroll.endSuccess(curPageData.length);
					if (page.num == 1) this.list = [];
					this.list = this.list.concat(curPageData);
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},

		}



	}
</script>

<style scoped lang="scss">
	// $w:calc(100vw*(702/750))

	.square {
		$w: calc(100vw*(702/750));

		.search {
			width: 100vw;
			height: calc(100vw*(72/750));
			position: relative;
			.search-boxes {
				position: fixed;
				
				width: $w;
				z-index: 99;
				margin-left: calc(100vw*(24/750));
				height: calc(100vw*(72/750));
				background: #FFFFFF;
				box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.05);
				border-radius: 20rpx;
				padding: 0 38rpx;
				.cuIcon-search {
					font-size: 36rpx;
					color: #999999;
				}

			}

		}


		.banner-box {
			margin: 20rpx 24rpx;
			height: calc(100vw*(200/750));
			border-radius: 20rpx;

			image {
				width: $w;
				height: calc(100vw*(200/750));
			}
		}

		.recommend-box {

			.title {
				margin: 20rpx 45rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 62rpx;

			}

			.scroll-view {
				$w: calc(100vw*(702/750));
				min-height: calc(100vw*(300/750));
				margin: 0 20rpx;

				.scroll-view-item {
					width: calc(100vw*(228/750));
					background: #FFFFFF;
					box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.05);
					border-radius: 20rpx;
					padding: 30rpx;
					margin-right: 9rpx;

					.img {
						width: calc(100vw*(100/750));
						height: calc(100vw*(100/750));
					}

					.name {
						font-size: 24rpx;
						font-weight: 800;
						color: #333333;
						margin-top: 14rpx;
					}

					.desc {
						font-size: 18rpx;
						font-weight: 500;
						color: #999999;
						margin-top: 10rpx;
						text-align: center;
					}

					.btn-box {
						margin-top: 19rpx;
						min-width: calc(100vw*(150/750));
						height: calc(100vw*(50/750));
						font-size: 24rpx;
						font-weight: 500;
						
					}
					.nojoin{
						color: #FFFFFF;
						background: #1270E0;
					}
					.join{
						background-color: rgba(195,195,195,0.2);
						color: rgba(0,0,0,0.5);
					}
					
				}


			}
		}


		.active-box {

			.title {
				margin: 20rpx 45rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 62rpx;
			}

			.active-item {
				margin: 20rpx 24rpx;
				height: calc(100vw*(200/750));
				padding: 20rpx;
				background: #FFFFFF;
				box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.05);
				border-radius: 20rpx;

				.left {
					width: calc(100vw*(200/750));
					height: calc(100vw*(160/750));
					image{
						width: inherit;
						height: inherit;
						border-radius: 20rpx;
					}
				}

				.right1 {
					width: calc(100vw*(442/750));

					.title1 {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 800;
						color: #333333;
						line-height: 40rpx;
						display: -webkit-box;
						-webkit-box-orgent: origent;
						-webkit-box-clamp: 2;

					}

					.bottom1 {
						font-size: 24rpx;
						font-weight: 500;
						color: #999999;
						line-height: 40rpx;
					}
				}
			}
		}

	}
</style>
